import React from 'react';
import styled from '@emotion/styled';
import QuoteApp from '../src/vertical/quote-app';
import { getQuotes } from '../src/data';
import { grid } from '../src/constants';

const generateData = {
  small: () => getQuotes(),
  medium: () => getQuotes(40),
  large: () => getQuotes(500),
};

const ScrollContainer = styled.div`
  box-sizing: border-box;
  background: lightgrey;
  padding: ${grid * 2}px;
  overflow-y: scroll;
  width: 500px;
  height: 100vh;
  position: relative;
`;

const Title = styled.h4`
  text-align: center;
  margin-bottom: ${grid}px;
`;

export default {
  title: 'Examples/single vertical list',
};

export const Basic = {
  render: () => <QuoteApp initial={generateData.small()} />,
  name: 'basic',
};

export const LargeDataSet = {
  render: () => <QuoteApp initial={generateData.large()} />,
  name: 'large data set',

  parameters: {
    chromatic: {
      // This is to make sure we do not reach
      // the 25,000,000px limit of the snapshot.
      viewports: [320],
    },
  },
};

export const DroppableIsAScrollContainer = {
  render: () => (
    <QuoteApp
      initial={generateData.medium()}
      listStyle={{
        overflowY: 'scroll',
        maxHeight: '80vh',
        position: 'relative',
      }}
    />
  ),

  name: 'Droppable is a scroll container',
};

export const WindowScrollingAndADroppableScrollContainer = {
  render: () => (
    <QuoteApp
      initial={generateData.medium()}
      listStyle={{
        overflowY: 'scroll',
        maxHeight: '120vh',
        position: 'relative',
      }}
    />
  ),

  name: 'window scrolling and a Droppable scroll container',
};

export const WithinALargerScrollContainer = {
  render: () => (
    <ScrollContainer>
      <Title>List is within a larger scroll container</Title>
      <QuoteApp initial={generateData.medium()} />
    </ScrollContainer>
  ),

  name: 'within a larger scroll container',
};

export const WithCombineEnabled = {
  render: () => <QuoteApp initial={generateData.small()} isCombineEnabled />,

  name: 'with combine enabled',
};
